<template>
  <div id="Home">
    <div class="top-bar fixClear">
      <div class="top-pic">
        <img :src="picUrl" alt="">
      </div>
      <div class="top-input">
        <img :src="picUr2" alt="">
        <input type="text" placeholder="国家级铜雕">
      </div>
    </div>
    <div class="slideshow">
      <div class="word-banner">
        <p class="word_1">极具匠心 推陈出新</p>
        <p class="word_2">打造时尚舒适家具</p>
      </div>
      <swiper class="swiper" :options="swiperOption">
        <swiper-slide v-for="(i,idx) in bannerData" :key="idx"><img :src="i.img" alt=""></swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
    <div class="top-list">
      <div class="list-pic" v-for="(i,idx) in topListData" :key="idx">
        <img :src="i.img" alt="">
        <span>{{i.text}}</span>
      </div>
    </div>
    <div class="exclusive">
      <div class="exclusive-title fixClear">
        <span class="left-title">专属福利</span>
        <span class="right-title">更多福利</span>
      </div>
      <div class="exclusive-list">
        <div class="list1" v-for="(i,idx) in exclusiveTitleData" :key="idx">
          <img :src="i.img" alt="">
        </div>
      </div>
    </div>
    <div class="goods">
      <div class="goods-left-right">
        <div class="left-goods">
          <p>限时低价</p>
          <div class="list_1">
            <div class="l_1 fixClear" v-for="(i,idx) in goodsListData" :key="idx">
              <img :src="i.img" alt="">
              <span>￥{{i.num1}}</span>
              <span class="change">￥{{i.num2}}</span>
            </div>
          </div>
        </div>
        <div class="right-goods">
          <p>热卖好物</p>
          <span class="best">好物集中营</span>
          <p class="same">发现共同喜好</p>
          <div class="list_1">
            <div class="l_1" v-for="(i,idx) in goodsListData" :key="idx">
              <img :src="i.img" alt="">
              <span>￥{{i.num1}}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="footer-goods">
        <span class="header">手匠头条</span>
        <span class="hot">热门</span>
        <span class="sentence">首批国家级铜雕室内装饰品上线</span>
      </div>
    </div>
    <div class="recommended-new">
      <span class="recommended" :class="{active: !isActive}" @click="recommendClick">推荐</span>
      <span class="new" :class="{active: isActive}" @click="recommendClick">新品</span>
    </div>
    <div class="products-box">
      <div class="products-list fixClear">
        <div class="products" v-for="(i,idx) in productsListData" :key="idx">
          <img :src="i.img" alt="">
          <span class="words_products">{{i.text}}</span>
          <div class="words_ fixClear">
            <span class="price">￥{{i.num}}</span>
            <span class="local">{{i.city}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'
export default {
  name: 'Home',
  data() {
    return {
      bannerData: [],
      topListData: [],
      exclusiveTitleData: [],
      productsListData: [],
      goodsListData: [],
      swiperOption: {
          spaceBetween: 30,
          centeredSlides: true,
          autoplay: {
            delay: 2500,
            disableOnInteraction: false
          },
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          },
      },
      isActive: false,
      picUrl: require('../../assets/img/home/home_logo@2x.png'),
      picUr2: require('../../assets/img/home/home_icon_search@2x.png'),
      picUr3: require('../../assets/img/home/home_banner image@2x.png'),
      picUr4: require('../../assets/img/home/home_icon_discount@2x.png'),
      picUr5: require('../../assets/img/home/welfare_membership rights@2x.png'),
      picUr6: require('../../assets/img/home/low price_image@2x.png'),
      picUr7: require('../../assets/img/home/recommend_image@2x.png'),
    }
  },
  components: {
    Swiper,
    SwiperSlide
  },
  directives: {
    swiper: directive
  },
  created() {
    this.ev_getBannerPicList();
    this.ev_getTopPicList();
    this.ev_getexclusiveTitle();
    this.ev_getProductsList();
    this.ev_getGoodsList();
  },
  methods: {
    recommendClick() {
      this.isActive = !this.isActive;
      console.log(this.isActive);
    },
    ev_getBannerPicList() {
      // const axios = require('axios');
      this.axios
        .get('/bannerList')
        .then(res => {
          console.log(res);
          this.bannerData = res.data;
        })
        .catch(error => {
          console.log(error);
        });
    },
    ev_getTopPicList() {
      this.axios
        .get('/topList')
        .then(res => {
          console.log(res);
          this.topListData = res.data;
        })
        .catch(error => {
          console.log(error);
        })
    },
    ev_getexclusiveTitle() {
      this.axios
        .get('/exclusiveTitle')
        .then(res => {
          console.log(res);
          this.exclusiveTitleData = res.data;
        })
        .catch(error => {
          console.log(error);
        })
    },
    ev_getGoodsList() {
      this.axios
        .get('/goodsList')
        .then(res => {
          console.log(res);
          this.goodsListData = res.data;
        })
        .catch(error => {
          console.log(error);
        })
    },
    ev_getProductsList() {
      this.axios
        .get('/productsList')
        .then(res => {
          console.log(res);
          this.productsListData = res.data;
        })
        .catch(error => {
          console.log(error);
        })
    }
  }
}
</script>

<style scoped>  
  #Home {
    font-size: 0;
  }
  .top-bar{
    margin-top: 6px;
    padding: 0 16px;
  }
  .top-pic img{
    width: 40px;
    height: 40px;
    float: left;
  }
  .top-input{
    position: relative;
    float: right;
    height: 40px;
    line-height: 40px;
  }
  .top-input input{
    width: 251px;
    height: 32px;
    padding-left: 36px;
    border: none;
    background: rgba(118, 118, 128, 0.12);
    border-radius: 44px;
    font-size: 17px;
    font-weight: 400;
    color: #999999;
  }
  .top-input img{
    width: 24px;
    height: 24px;
    position: absolute;
    left: 8px;
    top: 8px;
  }
  .slideshow{
    position: relative;
    margin-top: 16px;
    padding: 0 16px;
    text-align: center;
  }
  .slideshow img{
    /* width: 343px; */
    height: 192px;
  }
  .word-banner{
    position: absolute;
    z-index: 10;
    left: 40px;
    bottom: 12px;
  }
  .word-banner .word_1{
    font-size: 16px;
    font-weight: bold;
    color: #FFFFFF;
  }
  .word-banner .word_2{
    font-size: 12px;
    font-weight: 400;
    color: #CCCCCC;
  }
  .top-list{
    padding: 12px 16px;
    margin-top: 12px;
    display: flex;
  }
  .list-pic{
    flex: 1;
    text-align: center;
  }
  .list-pic img{
    width: 44px;
    height: 44px;
    vertical-align: middle;
  }
  .list-pic span{
    display: block;
    font-size: 14px;
    font-weight: 400;
    color: #333333;
  }
  .exclusive{
    width: 100%;
    height: 130px;
    border-top: 16px solid rgba(118, 118, 128, 0.12);
  }
  .exclusive-title{
    margin-top: 12px;
    padding: 0 16px;
  }
  .exclusive-title .left-title{
    float: left;
    display: block;
    font-size: 18px;
    font-weight: bold;
    color: #333333;
  }
  .exclusive-title .right-title{
    float: right;
    display: block;
    font-weight: bold;
    font-size: 12px;
    color: #999999;
    margin-top: 5px;
  }
  .exclusive-list{
    padding: 0 16px;
    display: flex;
    overflow: hidden;
  }
  .list1 {
    padding: 12px 10px 0 0;
  }
  .list1 img{
    width: 106px;
    height: 70px;
  }
  .goods{
    width: auto;
    height: 235px;
    border-top: 16px solid rgba(118, 118, 128, 0.12);
    padding: 12px 16px;
  }
  .goods-left-right{
    display: flex;
    width: 100%;
  }
  .left-goods p, .right-goods p{
    display: inline-block;
    font-size: 18px;
    font-weight: bold;
    color: #333333;
  }
  .left-goods {
    width: 212px;
  }
  .right-goods .best{
    font-size: 10px;
    font-weight: bold;
    color: #1B7373;
    text-align: center;
    padding: 0 7px;
    border: 1px solid #1B7373;
    border-radius: 90px;
  }
  .same{
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #1B7373 !important;
  }
  .l_1{
    float: left;
    text-align: center;
    padding: 12px 8px 0 0;
  }
  .list_1 img{
    width: 74px;
    height: 74px;
  }
  .list_1 span{
    display: block;
    font-size: 15px;
    font-weight: bold;
    color: #E71414;
  }
  .list_1 .change{
    font-size: 12px;
    font-weight: 300;
    color: #999999;
    text-decoration: line-through;
    margin-top: 6px;
  }
  .footer-goods{
    margin-top: 20px;
  }
  .header{
    font-size: 18px;
    font-weight: 400;
    color: #1B7373;
  }
  .hot{
    font-size: 10px;
    font-weight: 400;
    color: #E41A36;
    background: rgba(228, 21, 21, 0.13);
    border-radius: 2px;
  }
  .sentence{
    font-size: 14px;
    font-weight: 400;
    color: #404040;
  }
  .recommended-new{
    height: 56px;
    width: auto;
    border-top: 15px solid rgba(118, 118, 128, 0.12);
    line-height: 56px;
    padding: 0 16px;
  }
  .active{
    font-size: 18px !important;
    font-weight: bold !important;
    color: #1B7373 !important;
    border-bottom: 2px solid #1B7373;
  }
  .new, .recommended{
    font-size: 16px;
    font-weight: 400;
    color: #666666;
    margin-right: 20px;
  }
  .products-box{
    width: auto;
    background-color: rgba(118, 118, 128, 0.12);
    padding: 0 16px 5px 16px;
  }
  .products{
    float: left;
    margin-right: 3px;
    width: 168px;
    height: 256px;
    background: #FFFFFF;
    border-radius: 8px;
  }
  .products img{
    width: 100%;
    height: 168px;
  }
  .products span{
    display: block;
    padding-left: 8px;
  }
  .words_products{
    padding-top: 8px;
    font-size: 14px;
    font-weight: bold;
    color: #333333;
  }
  .price{
    float: left;
    font-size: 16px;
    font-weight: bold;
    color: #E42121;
    padding: 4px 0 0 0;
  }
  .local{
    float: right;
    font-size: 12px;
    font-weight: 400;
    color: #999999;
    padding: 7px 8px 0 0;
  }
</style>